<template>
  <el-dialog title="产品清单" v-model="state.dialog.isShowDialog" width="90%">
    <ProductList :project-id="state.projectId" :manuwork-id="state.manuworkId" :install-id="state.installId" />
  </el-dialog>
</template>

<script setup lang="ts" name="productListDialog">
import { reactive } from 'vue';
import ProductList from './index.vue';

const state = reactive({
  projectId: null,
  manuworkId: null,
  installId: null,
  products: [],
  dialog: {
    isShowDialog: false,
  },
});

// 打开弹窗
const openDialog = (params: any) => {
  if (params?.projectId) {
    state.projectId = params.projectId;
  } else if (params?.manuworkId) {
    state.manuworkId = params.manuworkId;
  } else if (params?.installId) {
    state.installId = params.installId;
  }
  state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};

// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>

<style lang="scss">
.file-list {
  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .action-button {
      margin: 0 3px;
      padding: 0;
    }

    &-name {
      flex: 1;
      padding-right: 8px;
      overflow: hidden;
    }
  }
}
</style>
